import React, { Component } from 'react';

class Listitem extends Component {
  render() {
    const { num, todolist, handleChangeChecked, handleDeleteItem, title, flag} = this.props
    return (
      <div>
          <div className="list-item">
            <h2>
              <b>{ title }</b>
              <b>{ num }</b>
            </h2>
            <ul>
              {
                todolist.length &&  todolist.map(v => {
                  return (
                  v.isChecked === flag ? <li key={ v.id }>
                    <div>
                      <input type="checkbox" defaultChecked={ v.isChecked } onClick={() => handleChangeChecked(v.id) }/>
                      <b>{ v.title }</b>
                    </div>
                    <span onClick={ () => handleDeleteItem(v.id) }>X</span>
                  </li> : ''
                  )
                })
              }
            </ul>
          </div>
      </div>
    );
  }
}

export default Listitem;
